<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" id="vp" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>我的</title>
		<link href="../../css/style.css" rel="stylesheet" type="text/css">
		<link href="../../css/mui.css" rel="stylesheet" type="text/css">
		<link rel="stylesheet" href="../../src/style.css">
		<link rel="stylesheet" href="../../src/iconfont/iconfont.css">
		<!-- <script src="../../js/rem.js"></script> -->

		<style>
			.me-top-Child {
				position: absolute;
				width: 0.74rem;
				height: 0.74rem;
				border-radius: 50%;
				border: solid 2px #fff;
				bottom: 15px;
				left: 1rem;
			}
			
			.me-top {
				padding-top: 0.27rem;
				margin: 0 0.24rem 0 0.26rem;
				border-bottom: solid 1px #F1F1F1;
				padding-bottom: 0.27rem;
			}
			
			#me #userinfo {
				background: #fff;
			}
			
			.me-top .name .child {
				font-size: 14px;
				letter-spacing: 0px;
				color: #282828;
				text-align: left;
			}
			
			#me .mui-grid-view.mui-grid-9 {
				border-top: none;
			}
			
			#me .mui-grid-view.mui-grid-9 .mui-table-view-cell {
				border-bottom: none;
				padding: 0;
			}
			
			#me .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
				font-size: 16px;
				margin-top: 0;
				color: #282828;
			}
			
			#me .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-bodyTwo {
				font-size: 12px;
				color: #7b7b7b;
				padding-top: 0.12rem;
			}
			
			#me .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-bodyTwo span {
				color: #ff6886;
			}
			
			#me .noborderRight {
				border-right: none;
			}
			
			.me_content_list .mui-grid-view.mui-grid-9 {
				border-left: none!important;
			}
			
			.me_content_list .mui-grid-view.mui-grid-9 .mui-table-view-cell {
				border-right: none!important;
			}
			
			.me_content_list .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
				border-bottom: solid 1px #f1f1f1;
				margin-left: 1.02rem;
				padding-bottom: 0.28rem;
				height: auto;
				padding-top: 0.05rem;
			}
			
			#me .me_content_list .mui-icon {
				margin-left: 0.27rem;
				font-size: inherit;
			}
			
			.me_content_list .mui-grid-view.mui-grid-9 .mui-table-view-cell>a:not(.mui-btn) {
				padding: 0!important;
			}
			
			#me .me_content_list .mui-table-view.mui-grid-view .mui-table-view-cell {
				padding-top: 0.27rem;
			}
			
			.mui-navigate-right:after,
			.mui-push-right:after {
				top: 8px;
			}
			
			.mr19 {
				margin-bottom: 0.19rem!important;
			}
			
			.mr19 .mui-media-body {
				border: none!important;
			}
			
			.parent {
				text-align: left;
				width: 200px;
			}
			
			.parent p {
				color: #282828!important;
				font-size: 18px!important;
				text-align: left!important;
				letter-spacing: 5px!important;
				float: left;
			}
			
			.parent .relation {
				display: table-caption;
				border-radius: 20px;
				color: #7b7b7b;
				border: solid 1px #e693a5;
				text-align: center;
				font-size: 10px;
				height: 15px;
				line-height: 15px;
				letter-spacing: 1px;
				width: 35px;
				margin-top: 2px;
			}
			
			.child .sex {
				width: 0.25rem;
				display: inline-block;
				margin: 0 2px;
			}
			
			.child .age {
				color: #7b7b7b;
				letter-spacing: 0px;
				font-size: 14px!important;
				margin-left: 2px;
			}
			
			.nameBig {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				max-width: 3rem;
			}
			
			.me_content_list .mui-table-view .mui-table-view-cell img {
				width: auto;
			}
			
			#navtypeb {
				position: absolute;
				display: block;
				top: 0.1rem;
				right: 0.4rem;
				color: #ff0000;
				border: solid 1px #ff0000;
				border-radius: 100%;
				background: #FF3F40;
				color: #fff;
				width: 10px;
				height: 10px;
				font-size: 10px;
				text-align: center!important;
				line-height: 18px;
				z-index: 99;
				display: none;
			}
			
			.updatea {
				width: 80%!important;
			}
			
			.vipday {
				width: 80%!important;
			}
			
			#updatea {
				color: #bbb;
			}
			
			#vipday {
				color: #bbb;
			}
			
			.icon-setting {
				position: absolute;
				top: 20px;
				right: 20px;
				font-size: 24px;
				color: #757575;
			}
			
			#msgbtn {
				position: relative;
			}
			
			.switch {
				padding-left: 15px!important;
				position: absolute;
			}
			.switch  img{
				width: 50px;
				height: 50px;
				border-radius: 100px;
			}
		</style>
	</head>

	<body>
		<div id="userinfos">
			<div class="userInfo">
				<div class="switch fl" id="switch" v-if="type==1" @tap="changeChild()"><img :src="child_avatar" /></div>
				<span class="iconfont icon-setting" id="gotoSetting"></span>
				<img class="userImg" :src="items.pic" id="userinfobtn" alt="" />
				<span class="userName">{{items.name}}<span v-if="items.relationship"> | </span>{{items.relationship}}</span>
				<ul class="babylist" v-if="items.child">
					<li v-for="child in items.child">
						<span><span class="iconfont" :class="[child.child_sex=='男'?'icon-man':'icon-woman']"></span> {{child.child_name}}</span>
						<span>{{child.year}}{{child.mons}}{{child.days}}</span>
					</li>
				</ul>
			</div>
			<div class="functionInfo">
				<ul>
					<li id="integral">
						<span class="iconfont icon-sponsorfill"></span>
						<span>获得{{items.integral}}积分</span>
					</li>
					<li id="msgbtn">
						<span class="iconfont icon-notification-fill"></span>
						<span>通知公告</span>
						<span id="navtypeb"></span>
					</li>
					<li id="integralShop">
						<span class="iconfont icon-shopfill"></span>
						<span>积分商城</span>
					</li>
				</ul>
			</div>
			<div class="funcitonList">
				<ul>
					<li id="qrcode" v-if="type==1" @tap="qrcode()">
						<span class="iconfont icon-qrcode"></span>
						<span>打卡</span>
						<span class="iconfont icon-enterinto_fill"></span>
					</li>
					<li id="invitebtn" v-if="type==1" @tap="invitebtn()">
						<span class="iconfont icon-friendaddfill"></span>
						<span>邀请家人</span>
						<span class="iconfont icon-enterinto_fill"></span>
					</li>
					<li id="favbtn">
						<span class="iconfont icon-appreciatefill"></span>
						<span>我的收藏</span>
						<span class="iconfont icon-enterinto_fill"></span>
					</li>
					<li id="chargebtn" v-if="type==1" @tap="chargebtn()">
						<span class="iconfont icon-live_fill"></span>
						<span>购买视频</span>
						<span style="font-size: 14px;color:#bbb;">{{items.vip_day>=0?'VIP剩余'+items.vip_day+'天':''}}</span>
					</li>
					<li id="myschool">
						<span class="iconfont icon-activityfill"></span>
						<span>我的学校</span>
						<span class="iconfont icon-enterinto_fill"></span>
					</li>
					<li id="videobtn">
						<span class="iconfont icon-videofill"></span>
						<span>孩子视频</span>
						<span class="iconfont icon-enterinto_fill"></span>
					</li>

					<!-- <li id="takeaddress">
                    <span class="iconfont icon-location"></span>
                    <span>收货地址</span>
                    <span class="iconfont icon-enterinto_fill"></span>
                </li> -->
					<li id="myorder">
						<span class="iconfont icon-edit"></span>
						<span>我的订单</span>
						<span class="iconfont icon-enterinto_fill"></span>
					</li>
					<!-- <li>
                    <span class="iconfont icon-error-fill"></span>
                    <span>版本信息</span>
                    <span style="font-size: 14px;" id="updatea"></span>
                </li-->
					<li id="register" v-if="type==1" @tap="register()">
						<span class="iconfont icon-calendar-check"></span>
						<span>签到记录</span>
						<span class="iconfont icon-enterinto_fill"></span>
					</li>
					<li id="suggest">
						<span class="iconfont icon-alert-fill"></span>
						<span>意见反馈</span>
						<span class="iconfont icon-enterinto_fill"></span>
					</li>

				</ul>
				<!-- <a id="exitbtn" href="#">退出登录</a> -->
			</div>
		</div>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/mui.js"></script>
		<script src="../../js/app.js"></script>
		<script src="../../js/jquery-1.8.3.min.js"></script>

		<script type="text/javascript">
			mui.init()
			var uid = "";
			var memberToken = '';
			var wgtVersion = '';
			var vipday = '';
			var state=''
			mui.plusReady(function() {

				state = app.getState();

				uid = state.userid;
				memberToken = state.memberToken;
				childid = state.childid
				userinfo.type = state.type;
				code = state.code;
				if(code){
					for(var i=0;i<code.length;i++){
					if(childid==code[i].child_id){
						userinfo.child_avatar=code[i].child_avatar
					}
					
				}
				}
				
				mui.post(Apiurl + 'index/member_info', {
					uid: uid,
					memberToken: memberToken
				}, function(data) {
					//alert(JSON.stringify(data));
					userinfo.items = data
					vip = data.vip;

					console.log(JSON.stringify(data))

					if(data.child) {
						$('.functionInfo').css('top', '160px') 
					} else {
						$('.functionInfo').css('top', '110px')
					}
				}, 'json');
				//获取通知公告消息数量
				mui.post(Apiurl + 'index/tong', {
					uid: uid,
					memberToken: memberToken,
					child_id: childid
				}, function(data) {
					if(data.un == 1) {
						document.getElementById('navtypeb').style.display = "block";
					}
				}, 'json')

			});
			//刷新积分
			window.addEventListener('refreshpoint', function(event) {
				mui.post(Apiurl + 'index/member_info', {
					uid: uid,
					memberToken: memberToken
				}, function(data) {
					//console.log(JSON.stringify(data)); 
					userinfo.items = data

				}, 'json');
			});
			var userinfo = new Vue({
				el: '#userinfos',
				data: {
					items: [],
					update: wgtVersion,
					type: '',
					child_avatar:''
				},
				methods: {

					changeChild: function() {
						titlestyle.titleNView.titleText = "宝宝列表";
						mui.openWindow({
							url: './childList/index.html',
							id: 'childList',
							preload: true,
							createNew: true,
							show: {
								aniShow: 'pop-in',
								autoShow: true
							},

							styles: titlestyle,
							waiting: {
								autoShow: true
							}
						});
					},
					register: function() {
						titlestyle.titleNView.titleText = "考勤";
						mui.openWindowWithTitle({
							url: './register/index.html',
							id: 'register',
							preload: true,
							show: {
								aniShow: 'pop-in',
								autoShow: true
							},
							styles: titlestyle,
							waiting: {
								autoShow: true
							}
						});
					},
					qrcode: function() {
						titlestyle.titleNView.titleText = "请在考勤机上扫描二维码";
						mui.openWindowWithTitle({
							url: '../ScanQRcode.html',
							id: 'ScanQRcodez',
							preload: true,
							show: {
								aniShow: 'pop-in',
								autoShow: true
							},
							styles: titlestyle,
							waiting: {
								autoShow: true
							}
						});
					},
					invitebtn: function() {
						if(userinfo.items.relationship == '') {
							mui.toast('请先绑定关系')
						} else {
							titlestyle.titleNView.titleText = "亲友团";
							mui.openWindowWithTitle({
								url: './invite/index.html',
								id: 'invite',
								preload: true,
								show: {
									aniShow: 'pop-in',
									autoShow: true
								},
								styles: titlestyle,
								waiting: {
									autoShow: true 
								}
							});
						}
					},
					chargebtn: function() {
						if(vip == 0) {
							titlestyle.titleNView.titleText = "视频充值";
							mui.openWindowWithTitle({
								url: './charge/charge.html',
								id: 'charge',
								preload: true,
								show: {
									aniShow: 'pop-in',
									autoShow: true
								},
								styles: titlestyle,
								waiting: {
									autoShow: true
								}
							});
						} else {
							return false;
						}
					}

				},

			});
			var backButtonPress = 0;
			mui.back = function(event) {
				backButtonPress++;
				if(backButtonPress > 1) {
					plus.runtime.quit();
				} else {
					plus.nativeUI.toast('再按一次退出应用');
				}
				setTimeout(function() {
					backButtonPress = 0;
				}, 1000);
				return false;
			};
			var titlestyle = {
				"render": "always",
				"popGesture": "hide",
				"bounce": "vertical",
				"bounceBackground": "#efeff4",
				"titleNView": { //详情页原生导航配置
					backgroundColor: '#fff', //导航栏背景色
					titleText: '', //导航栏标题
					titleColor: '#000', //文字颜色
					autoBackButton: true, //自动绘制返回箭头
					splitLine: { //底部分割线
						color: '#dfdfdf'
					}
				}
			};

			//积分任务 
			document.getElementById("integral").addEventListener('tap', function() {
				titlestyle.titleNView.titleText = "积分明细";
				mui.openWindowWithTitle({
					url: './integral/index.html',
					id: 'integral',
					preload: true,
					show: {
						aniShow: 'pop-in',
						autoShow: true
					},
					styles: titlestyle,
					waiting: {
						autoShow: true
					}
				});
			});
			//设置 
			document.getElementById("gotoSetting").addEventListener('tap', function() {
				titlestyle.titleNView.titleText = "设置";
				mui.openWindowWithTitle({
					url: './setting.html',
					id: 'setting',
					preload: true,
					show: {
						aniShow: 'pop-in',
						autoShow: true
					},
					styles: titlestyle,
					waiting: {
						autoShow: true
					}
				});
			});
			//通知公告
			document.getElementById("msgbtn").addEventListener('tap', function() {
				document.getElementById('navtypeb').style.display = "none";
				titlestyle.titleNView.titleText = "通知公告";
				mui.openWindowWithTitle({
					url: './message/index.html',
					id: 'message',
					preload: true,
					show: {
						aniShow: 'pop-in',
						autoShow: true
					},
					styles: titlestyle,
					waiting: {
						autoShow: true
					}
				});
			});
			//积分商城
			document.getElementById("integralShop").addEventListener('tap', function() {
				titlestyle.titleNView.titleText = "积分商城";
				mui.openWindowWithTitle({
					url: './shop/index.html',
					id: 'shop',
					preload: true,
					show: {
						aniShow: 'pop-in',
						autoShow: true
					},
					styles: titlestyle,
					waiting: {
						autoShow: true
					}
				});
				/*plus.nativeUI.toast('敬请期待', {
						verticalAlign: 'middle'
					});*/
			});

			//成长日记
			/*document.getElementById("diary").addEventListener('tap', function() {
				titlestyle.titleNView.titleText = "成长日记";
				mui.openWindowWithTitle({
					url: './diary/index.html',
					id: 'diary',
					preload: true,
					show: {
						aniShow: 'pop-in',
						autoShow: true
					},
					styles: titlestyle,
					waiting: {
						autoShow: true
					}
				});
			});*/
			//邀请家人

			//邀请家人

			//收藏
			document.getElementById("favbtn").addEventListener('tap', function() {
				titlestyle.titleNView.titleText = "我的收藏";
				mui.openWindowWithTitle({
					url: './fav/index.html',
					id: 'favindex',
					preload: true,
					show: {
						aniShow: 'pop-in',
						autoShow: true
					},
					styles: titlestyle,
					waiting: {
						autoShow: true
					}
				});
			});
			//商城
			/*document.getElementById("shop").addEventListener('tap', function() {
				titlestyle.titleNView.titleText = "我的订单";
				mui.openWindowWithTitle({
					url: './shop/index.html',
					id: 'shopoder',
					preload: true,
					show: {
						aniShow: 'pop-in',
						autoShow: true
					},
					styles: titlestyle,
					waiting: {
						autoShow: true
					}
				});
			});*/
			//我的学校
			document.getElementById("myschool").addEventListener('tap', function() {
				titlestyle.titleNView.titleText = "我的学校";
				mui.openWindowWithTitle({
					url: './myschool/index.html',
					id: 'myschool',
					preload: true,
					show: {
						aniShow: 'pop-in',
						autoShow: true
					},
					styles: titlestyle,
					waiting: {
						autoShow: true
					}
				});
			});
			//孩子视频
			document.getElementById("videobtn").addEventListener('tap', function() {
				titlestyle.titleNView.titleText = "孩子视频";
				mui.openWindowWithTitle({
					url: '../monitor/index.html',
					id: 'monitorz',
					preload: true,
					show: {
						aniShow: 'pop-in',
						autoShow: true
					},
					styles: titlestyle,
					waiting: {
						autoShow: true
					}
				});
			});
			//我的订单
			document.getElementById("myorder").addEventListener('tap', function() {
				titlestyle.titleNView.titleText = "我的订单";
				mui.openWindowWithTitle({
					url: './shop/orderlist.html',
					id: 'orderlist',
					preload: true,
					show: {
						aniShow: 'pop-in',
						autoShow: true
					},
					styles: titlestyle,
					waiting: {
						autoShow: true
					}
				});

			});
			//班级排行
			/*document.getElementById("classseniority").addEventListener('tap', function() {
				titlestyle.titleNView.titleText = "班级排行";
				mui.openWindowWithTitle({
					url: './class/index.html',
					id: 'shop',
					preload: true,
					show: {
						aniShow: 'pop-in',
						autoShow: true
					},
					styles: titlestyle,
					waiting: {
						autoShow: true
					}
				});
			});*/
			//切换 
			/*document.getElementById("switch").addEventListener('tap', function() {
			    titlestyle.titleNView.titleText = "宝宝列表"; 
			    mui.openWindow({
			        url: './childList/index.html',
			        id: 'childList', 
			        preload: true,
			        createNew:true, 
			        show: {
			            aniShow: 'pop-in',
			            autoShow: true
			        },
			    
			        styles: titlestyle,
			        waiting: {
			            autoShow: true
			        }
			    });
			});*/
			//签到
			/*document.getElementById("register").addEventListener('tap', function() {
				titlestyle.titleNView.titleText = "考勤";
				mui.openWindowWithTitle({
					url: './register/index.html',
					id: 'register',
					preload: true,
					show: {
						aniShow: 'pop-in',
						autoShow: true
					},
					styles: titlestyle,
					waiting: {
						autoShow: true
					}
				});
			});*/
			//请假
			/*document.getElementById("leave").addEventListener('tap', function() {
				titlestyle.titleNView.titleText = "宝贝请假";
				mui.openWindowWithTitle({
					url: './leave/index.html',
					id: 'leave',
					preload: true,
					show: {
						aniShow: 'pop-in',
						autoShow: true
					},
					styles: titlestyle, 
					waiting: {
						autoShow: true
					}
				});
			});*/

			//充值

			//个人信息
			document.getElementById("userinfobtn").addEventListener('tap', function() {
				titlestyle.titleNView.titleText = "个人信息/孩子信息";
				mui.openWindowWithTitle({
					url: './userinfo/index.html',
					id: 'userinfoindex',
					preload: true,
					show: {
						aniShow: 'pop-in',
						autoShow: true
					},
					styles: titlestyle,
					waiting: {
						autoShow: true
					}
				});
			});

			//意见反馈
			document.getElementById('suggest').addEventListener('tap', function() {
				mui.openWindowWithTitle({
					url: './suggest/index.html',
					id: 'suggesta',
					preload: true,
					show: {
						aniShow: 'pop-in',
						autoShow: true
					},
					styles: {
						"render": "always",
						"popGesture": "hide",
						"bounce": "vertical",
						"bounceBackground": "#efeff4",
						"titleNView": titleNView = { //详情页原生导航配置
							autoBackButton: true, //自动绘制返回箭头
							backgroundColor: '#fff', //导航栏背景色
							titleText: '用户反馈', //导航栏标题
							titleColor: '#000', //文字颜色
							//coverage:"120px",
							//type: 'transparent', //透明渐变样式
							splitLine: { //底部分割线
								color: '#dfdfdf'
							}
						}
					},
					waiting: {
						autoShow: true
					}
				});
			})
			window.addEventListener('refreshuserinfo', function(event) {
				var backtype = event.detail.type;
				var modifyinfo = event.detail.modify;
				var relationship = event.detail.relationship;
				var sex = event.detail.sex;
				var years = event.detail.years;
				var pic = event.detail.pic;
				if(backtype == 1) {
					userinfo.items.name = modifyinfo;
				} else if(backtype == 2) {
					userinfo.items.tel = modifyinfo;
				} else if(backtype == 4) {
					userinfo.items.child[0].child_name = modifyinfo;
				}
				if(years)
					userinfo.items.child.forEach(function(res) {
						res.year = event.detail.years;
						res.mons = event.detail.mons;
						res.days = event.detail.days;
					})
				if(relationship) {
					userinfo.items.relationship = relationship;
				} else if(sex) {
					userinfo.items.child[0].child_sex = sex;
				}
				if(pic) {
					mui.post(Apiurl + 'index/member_info', {
						uid: uid,
						memberToken: memberToken
					}, function(data) {
						//console.log(JSON.stringify(data)); 
						userinfo.items = data

					}, 'json');
				}
				
			})
			window.addEventListener('vipdayrefresh', function(event) {
				var vipday = event.detail.vipday;
				document.getElementById('vipday').innerHTML = vipday;
				//alert(vipday)
			});
			//切换孩子
			window.addEventListener('changeChild', function(event) {
				childid = event.detail.changeChild;
				mui.post(Apiurl + 'index/tong', {
					uid: uid, 
					memberToken: memberToken,
					child_id: childid
				}, function(data) { 
					if(data.un == 1) {
						document.getElementById('navtypeb').style.display = "block";
					}
				}, 'json')
			});
		</script>
	</body>

</html>